<template>
    <div>
        <!-- 头部 -->
        <v-top></v-top>
        <v-banner></v-banner>
        <div class="cont">
            <div class="max">
                <div class="indTabcontrol">
                    <div class="indTab">
                        <ul>
                            <li :class="{ on: showNum === 1 }" @mouseenter="ShowClick(1)">
                                招标公告
                            </li>
                            <li :class="{ on: showNum === 2 }" @mouseenter="ShowClick(2)">
                                变更公告
                            </li>
                            <li :class="{ on: showNum === 3 }" @mouseenter="ShowClick(3)">
                                中标公示/公告
                            </li>
                            <li :class="{ on: showNum === 4 }" @mouseenter="ShowClick(4)">
                                终止公告/其他
                            </li>
                        </ul>
                    </div>
                    <div class="indTabContent">
                        <div class="view" v-if="showNum == 1">
                            <ul>
                                <li v-for="(row, index) in tenderAnnouncement" :key="index" @click="go(`/noticeList/${row.bidingId}`)">
                                    <p>
                                        {{ row.bidingTitle }}
                                    </p>
                                    <p>
                                        <span>招标方式</span>
                                        <span>{{ row.bidingWay }}</span>
                                    </p>
                                    <p>
                                        <span>发布时间</span>
                                        <span>{{ row.bidOpenTime && row.bidOpenTime.slice(0, 10) }}</span>
                                    </p>
                                    <p>查看详情</p>
                                </li>
                            </ul>

                            <div class="more" @click="go('/bulletinList')">更多信息</div>
                        </div>

                        <div class="view" v-if="showNum == 2">
                            <ul>
                                <li v-for="(row, index) in changeAnnouncement" :key="index" @click="go(`/noticeList2/${row.bidingId}`)">
                                    <p>
                                        {{ row.bidingTitle }}
                                    </p>
                                    <p>
                                        <span>招标方式</span>
                                        <span>{{ row.bidingWay }}</span>
                                    </p>
                                    <p>
                                        <span>发布时间</span>
                                        <span>{{ row.bidOpenTime && row.bidOpenTime.slice(0, 10) }}</span>
                                    </p>
                                    <p>查看详情</p>
                                </li>
                            </ul>

                            <div class="more" @click="go('/bulletinList2')">更多信息</div>
                        </div>

                        <div class="view" v-if="showNum == 3">
                            <ul>
                                <li v-for="(row, index) in bidAnnouncement" :key="index" @click="go(`/noticeList3/${row.bidData.bidingId}`)">
                                    <p>
                                        {{ row.bidData.bidingTitle }}
                                    </p>
                                    <p>
                                        <span>招标方式</span>
                                        <span>{{ row.bidData.bidingWay }}</span>
                                    </p>
                                    <p>
                                        <span>发布时间</span>
                                        <span>{{ row.bidData.bidOpenTime && row.bidData.bidOpenTime.slice(0, 10) }}</span>
                                    </p>
                                    <p>查看详情</p>
                                </li>
                            </ul>

                            <div class="more" @click="go('/bulletinList3')">更多信息</div>
                        </div>

                        <div class="view" v-if="showNum == 4">
                            <ul>
                                <li v-for="(row, index) in endAnnouncement" :key="index" @click="go(`/noticeList4/${row.bidingId}`)">
                                    <p>
                                        {{ row.bidingTitle }}
                                    </p>
                                    <p>
                                        <span>招标方式</span>
                                        <span>{{ row.bidingWay }}</span>
                                    </p>
                                    <p>
                                        <span>发布时间</span>
                                        <span>{{ row.bidOpenTime && row.bidOpenTime.slice(0, 10) }}</span>
                                    </p>
                                    <p>查看详情</p>
                                </li>
                            </ul>

                            <div class="more" @click="go('/bulletinList4')">更多信息</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 新闻 -->
        <div class="cont">
            <div class="ztitle">
                <div class="ztitle_1">
                    <p>
                        <span>新闻动态</span>
                        <span>NEWS</span>
                        <span></span>
                    </p>
                </div>
            </div>
            <div class="news max">
                <div class="news_1">
                    <Carousel
                        :autoplay="true"
                        :duration="2000"
                        :initIndex="0"
                        containerWidth="100%"
                        containerHeight="20rem"
                        :direction="true"
                        directionMode="hover"
                        :directionSize="30"
                        directionColor="white"
                        :indicator="true"
                        indicatorMode="always"
                        indicatorColor="white"
                        indicatorActiveColor="#1d9383"
                        @before-moving="beforeMoving"
                        @after-moving="afterMoving"
                    >
                        <CarouselItem
                            v-for="(item, index) in data2"
                            :key="index"
                            :idx="index"
                        >
                            <img :src="item"/>
                            <p class="wenzi">aaa</p>
                        </CarouselItem>
                    </Carousel>
                </div>
                <div class="news_2">
                    <ul>
                        <li @click="go('/newList')">
              <span>
                <em
                >佛山市禅城区城市管理和综合执法局东平河北岸核心带艺术碧道项目</em
                >
                <i>NEW</i>
              </span>
                            <span>2010-3-12</span>
                        </li>
                        <li>
              <span>
                <em
                >佛山市禅城区城市管理和综合执法局东平河北岸核心带艺术碧道项目</em
                >
                <i>NEW</i>
              </span>
                            <span>2010-3-12</span>
                        </li>
                        <li>
              <span>
                <em
                >佛山市禅城区城市管理和综合执法局东平河北岸核心带艺术碧道项目</em
                >
                <i>NEW</i>
              </span>
                            <span>2010-3-12</span>
                        </li>

                        <li>
              <span>
                <em
                >佛山市禅城区城市管理和综合执法局东平河北岸核心带艺术碧道项目</em
                >
                <i>NEW</i>
              </span>
                            <span>2010-3-12</span>
                        </li>
                        <li>
              <span>
                <em
                >佛山市禅城区城市管理和综合执法局东平河北岸核心带艺术碧道项目</em
                >
              </span>
                            <span>2010-3-12</span>
                        </li>
                        <li>
              <span>
                <em
                >佛山市禅城区城市管理和综合执法局东平河北岸核心带艺术碧道项目</em
                >
              </span>
                            <span>2010-3-12</span>
                        </li>
                        <li>
              <span>
                <em
                >佛山市禅城区城市管理和综合执法局东平河北岸核心带艺术碧道项目</em
                >
              </span>
                            <span>2010-3-12</span>
                        </li>
                    </ul>
                    <div class="more" @click="go('/list')">查看更多</div>
                </div>
            </div>
        </div>

        <div class="cont">
            <div class="ztitle">
                <div class="ztitle_1">
                    <p>
                        <span>进一个月采购动态</span>
                        <span>PURCHASE DYNAMICS IN A MONTH</span>
                    </p>
                </div>
            </div>

            <div class="procurement max">
                <div class="heng"></div>
                <div class="pr_list">
                    <ul>
                        <li>
                            <p>
                <span>
                  <img src="@/assets/images/a1.png"/>
                </span>
                                <span>中标</span>
                                <span>256项</span>
                            </p>
                        </li>
                        <li>
                            <p>
                <span>
                  <img src="@/assets/images/a2.png"/>
                </span>
                                <span>废标</span>
                                <span>256项</span>
                            </p>
                        </li>
                        <li>
                            <p>
                <span>
                  <img src="@/assets/images/a3.png"/>
                </span>
                                <span>开标</span>
                                <span>256项</span>
                            </p>
                        </li>
                        <li>
                            <p>
                <span>
                  <img src="@/assets/images/a4.png"/>
                </span>
                                <span>自由主题</span>
                                <span>256项</span>
                            </p>
                        </li>
                    </ul>
                </div>
            </div>
        </div>

        <div class="cont3">
            <div class="c3_1">
                <div class="title">
                    <img src="@/assets/images/b1.png"/>
                    供应商
                </div>
                <div class="c3_list">
                    <ul>
                        <li>
              <span>
                <img src="@/assets/images/b3.png"/>
              </span>
                            <span>查看</span>
                        </li>
                        <li>
              <span>
                <img src="@/assets/images/b4.png"/>
              </span>
                            <span>去注册</span>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="c3_2">
                <div class="title">
                    <img src="@/assets/images/b2.png"/>
                    系统登录
                </div>
                <div class="c3_list">
                    <ul>
                        <li>
              <span>
                <img src="@/assets/images/b5.png"/>
              </span>
                            <span>采购云平台</span>
                        </li>
                    </ul>
                </div>
            </div>
        </div>

        <div class="cont">
            <div class="ztitle">
                <div class="ztitle_1">
                    <p>
                        <span>网站访问数量</span>
                        <span>NUMBER OF WEBSITE VISITS</span>
                        <span></span>
                    </p>
                </div>
            </div>

            <div class="NUMBER max">
                <ul>
                    <li>日访问量 200</li>
                    <li>月访问量 20000</li>
                    <li>年访问量 200000</li>
                </ul>
            </div>
        </div>

        <!-- 底部 -->
        <v-footer></v-footer>
    </div>
</template>

<script>
    import footer from "@/components/foot";
    import top from "@/components/top";
    import banner from "@/components/banner";
    // import { Swiper, SwiperSlide, directive } from "vue-awesome-swiper";
    import {defineComponent, reactive, toRefs} from "vue";
    import axios from "axios";
    import {
        getBidAnnouncement,
        getChangeAnnouncement,
        getEndAnnouncement,
        getTenderAnnouncement
    } from "../request/api/sys";

    export default defineComponent({
        components: {
            "v-footer": footer,
            "v-top": top,
            "v-banner": banner,
        },

        data() {
            return {
                tenderAnnouncement: [], // 招标公告
                changeAnnouncement: [], // 变更公告
                bidAnnouncement: [], // 中标公告
                endAnnouncement: [], // 终止公告
            };
        },

        created() {
            // 获取招标公告
            this.getTenderAnnouncementList();
            // 获取变更公告
            this.getChangeAnnouncementList();
            // 获取中标公告
            this.getBidAnnouncementList();
            // 获取终止公告
            this.getEndAnnouncementList();
        },

        methods: {
            // 获取招标公告
            getTenderAnnouncementList () {
                getTenderAnnouncement({
                    pageNum: 1,
                    pageSize: 6,
                    modal: 2
                }).then((res) => {
                    this.tenderAnnouncement = res.rows
                    console.log(this.tenderAnnouncement)
                })
            },
            // 获取变更公告
            getChangeAnnouncementList () {
                getChangeAnnouncement({
                    pageNum: 1,
                    pageSize: 6
                }).then((res) => {
                    this.changeAnnouncement = res.rows
                })
            },
            // 获取中标公告
            getBidAnnouncementList () {
                getBidAnnouncement({
                    pageNum: 1,
                    pageSize: 6
                }).then((res) => {
                    this.bidAnnouncement = res.rows
                })
            },
            // 获取终止公告
            getEndAnnouncementList () {
                getEndAnnouncement({
                    pageNum: 1,
                    pageSize: 6,
                    status: 1
                }).then((res) => {
                    this.endAnnouncement = res.rows
                })
            },
        },

        setup() {
            const state = reactive({
                list: {}, //tab的list
                showNum: 1,
                data2: [
                    "https://ns-strategy.cdn.bcebos.com/ns-strategy/upload/fc_big_pic/part-00693-2745.jpg",
                    "https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2190440116,1436403087&fm=26&gp=0.jpg",
                    "https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3593656793,3600757928&fm=26&gp=0.jpg",
                ],
            });

            function ShowClick(e) {
                this.showNum = e;
            }

            function beforeMoving(dire) {
                // console.log("before", dire);
            }

            function afterMoving(obj) {
                // console.log("after", obj);
            }

            function go(path) {
                this.$router.push({
                    path: path,
                    query: {
                        // id: id
                    },
                });
            }

            return {
                ...toRefs(state),
                beforeMoving,
                afterMoving,
                ShowClick,
                go,
            };
        },
    });
</script>
<style scoped></style>
